<template>
    <div v-if="visible" class="dialog-container">
        <div class="dialog-box">
            <div class="header flex mg-b-20">
                <div class="fs-20 bold">席位详情</div>
                <div class="fc-grey mg-l-5 mg-r-5">当前已有席位数：</div>
                <div class="fc-primary">{{ hasSeat }}（已用{{ useSeat }}）</div>
                <div v-if="willExpireSeatNumber" class="flex shadow-box flex-ai-c">
                    <el-icon class="fc-orange mg-r-5">
                        <Warning />
                    </el-icon>
                    检测到您有<span class="fc-orange">{{ willExpireSeatNumber }}个</span>席位即将到期
                </div>
                <div class="close pointer" @click="visible = false">&times;</div>
            </div>
            <el-table :data="tableData" max-height="600" style="width: 100%" :header-row-style="{ color: '#202536' }"
                :header-cell-style="{ background: '#F7F8FC' }" :row-style="{ color: '#5E617D' }" :cell-style="{
                    height: '35px',
                    padding: '0'
                }">
                <template v-for="(i, index) in tableHeader" :key="index">
                    <template v-if="i.prop === 'salesScenario'">
                        <el-table-column :label="i.label" :prop="i.prop">
                            <template #default="scope">
                                <div>
                                    {{ salesScenarioMap(scope.row.salesScenario) }}
                                </div>
                            </template>
                        </el-table-column>
                    </template>
                    <template v-else-if="i.prop === 'dueDate'">
                        <el-table-column :label="i.label" :prop="i.prop">
                            <template #default="scope">
                                <div :class="{ 'fc-orange': willExpire(scope.row.dueDate) }">
                                    {{ scope.row.dueDate }}
                                </div>
                            </template>
                        </el-table-column>
                    </template>
                    <template v-else>
                        <el-table-column :label="i.label" :prop="i.prop">
                        </el-table-column>
                    </template>
                </template>
            </el-table>
            <div class="pagination-box">
                <el-pagination class="pagination" v-model:currentPage="pageInfo.pageNum"
                    v-model:page-size="pageInfo.pageSize" :page-sizes="[10, 30, 50, 100]"
                    layout="total, sizes, prev, pager, next, jumper" :total="pageInfo.total" @size-change="handleSizeChange"
                    @current-change="handleCurrentChange">
                </el-pagination>
            </div>
        </div>
    </div>
</template>
<script lang="ts">
import { defineComponent } from 'vue'
import uploadFile from '@/components/upload-file.vue';
import { getCompanySeatInfo } from '@/api/recharge-record'
import dayjs from 'dayjs';
const expireDay = dayjs().add(30, 'day').format('YYYY-MM-DD') + ' 23:59:59'

export default defineComponent({
    props: {
        show: {
            type: Boolean,
            default: false
        },
        hasSeat: {
            type: [Number, String],
            default: 0
        },
        useSeat: {
            type: [Number, String],
            default: 0
        },
        willExpireSeatNumber: {
            type: [Number, String],
            default: 0
        }
    },
    components: {
        uploadFile
    },
    data() {
        return {
            visible: false,
            tableHeader: [
                {
                    prop: 'salesScenario',
                    label: '类型'
                },
                {
                    prop: 'buySeatCount',
                    label: '数量'
                },
                {
                    prop: 'updateTime',
                    label: '生效时间'
                },
                {
                    prop: 'seatExpirationTime',
                    label: '过期时间'
                },
            ],
            tableData: [] as any,
            pageInfo: {
                pageNum: 1,
                pageSize: 10,
                total: 0
            }
        }
    },
    computed: {
        salesScenarioMap() {
            return (type: any) => {
                // 0：首签，1：续签,2:席位购买，3:续费+席位购买,4首签+席位购买
                const map = {
                    0: '首签',
                    1: '续签',
                    2: '席位购买',
                    3: '续费+席位购买',
                    4: '首签+席位购买'
                } as any
                return map[type]
            }
        }
    },
    watch: {
        show: {
            handler(newval) {
                this.visible = newval
                if (newval) {
                    this.getData()
                }
            },
            immediate: true
        },
        visible(newval) {
            this.$emit('update:show', newval)
        }
    },
    methods: {
        handleClose() {
            this.visible = false
        },
        getData() {
            getCompanySeatInfo({
                pageNum: this.pageInfo.pageNum,
                pageSize: this.pageInfo.pageSize
            }).then((res: any) => {
                console.log(res)
                this.tableData = res?.seatList?.list || []
                this.pageInfo.total = res?.seatList?.total || 0
            })
        },
        handleChange() {
            console.log(11111)
        },
        handleSizeChange(ev: any) {
            console.log(111, ev);
            this.pageInfo.pageSize = ev
            this.getData()
        },
        handleCurrentChange(ev: any) {
            this.pageInfo.pageNum = ev
            this.getData()
            console.log(222, ev);
        },
        willExpire(dueDate: any) {
            return dayjs(dueDate) < dayjs(expireDay)
        }
    }
})
</script>
<style lang="stylus" scoped>
.dialog-container
    width 100%
    height 100%
    position fixed
    left 0
    top 0
    background rgba(0,0,0,0.5)
    z-index 100
.dialog-box
    width 800px
    position absolute
    left 50%
    top 50%
    transform translate(-50%, -50%)
    padding 24px
    border-radius 8px
    overflow hidden
    background #fff
    position relative
.title
    padding 25px 0 35px 16px
.close
    position absolute
    right 20px
    top 20px
    transform scale(2)
.dialog-header
    background rgba(0,0,0,0.7)
.dialog-body
    background #fff
    border-radius 15px
    padding 20px 16px
    margin-top -10px
.header
    align-items flex-end
.shadow-box
    background rgba(255, 118, 66, 0.1)
    padding 7px 10px
    border-radius 15px 5px 5px 0
.pagination-box
    padding-top 20px
    text-align right
</style>